<!-- 容器配置 -->
<template>
	<div>
		<el-form-item label="容器类型">
			<el-radio-group v-model="main.activeOption.containerType">
				<el-radio-button label="1">可视化</el-radio-button>
				<el-radio-button label="2">iframe</el-radio-button>
			</el-radio-group>
		</el-form-item>
		<el-form-item label="可视化" v-if="main.activeOption.containerType == '1'">
			<avue-select :dic="canvasList" filterable :disabled="disabled" v-model="main.activeOption.canvasId" @change="changeCanvasList"> </avue-select>
		</el-form-item>
		<el-form-item label="地址" v-if="main.activeOption.containerType == '2'">
			<avue-input :disabled="disabled" type="textarea" v-model="main.activeObj.data.value"></avue-input>
		</el-form-item>
	</div>
</template>

<script>
import { getList, getObj } from '@/api/visual';
import { config as defaultConfig } from '@/option/config';
export default {
	name: 'iframe',
	inject: ['main', 'contain'],
	data() {
		return {
			canvasList: [],
			disabled: this.contain.activeObj.isLock
		};
	},
	mounted() {},
	watch: {
		'main.activeOption.containerType': {
			handler(value) {
				if (value == '1') {
					this.getCanvasList();
				}
			},
			immediate: true
		}
	},
	methods: {
		// 获取可视化列表
		getCanvasList() {
			getList({
				// category: 3,
				current: 1,
				size: 100
			}).then(res => {
				const data = res.data.data;
				this.canvasList = data.records.map(rec => {
					return {
						value: rec.id,
						label: rec.title
					};
				});
				console.log('this.canvasList  ', this.canvasList);
			});
		},
		// 获取可视化详情
		changeCanvasList(value) {
			console.log('value', value);
			// getObj(value.value)
			//     .then((res) => {
			//         const data = res.data.data;
			//         this.contain.obj = data;
			//         let config = data.config;
			//         const contain = {
			//             config: JSON.parse(config.detail) || {},
			//             component: JSON.parse(config.component) || []
			//         };
			//         this.contain.config = Object.assign(
			//             {},
			//             defaultConfig,
			//             contain.config
			//         );
			//         this.$set(this.contain, "nav", contain.component);
			//         this.$set(this.contain, "visual", data.visual);
			//         console.log("this.contain", this.contain);
			//     })
			//     .catch((err) => {});
		}
	}
};
</script>

<style></style>
